<script setup>
import { ref, onMounted, computed } from 'vue';
import { FilterMatchMode, FilterOperator } from 'primevue/api';
import { useToast } from 'primevue/usetoast';
import { jwtDecode } from "jwt-decode";
import axios from '../../util/interceptor';
import Toast from 'primevue/toast';
import Dropdown from 'primevue/dropdown';

const token = localStorage.getItem("token");
const decoded = jwtDecode(token);
const imageName = ref("");
const toast = useToast();
const dt = ref();
const orders = ref();
const orderDialog = ref(false);
const deleteOrderDialog = ref(false);
const deleteOrdersDialog = ref(false);
const transferOrderDialog = ref(false);
const materialDialog = ref(false);
const checkDialog = ref(false);
const denyOrdersDialog = ref(false);
const passOrdersDialog = ref(false);
const shipmentDialog = ref(false);
const equipmentDialog = ref(false);
const equipmentConfirmDialog = ref(false);
const finalPaymentDialog = ref(false);
const finishOrderDialog = ref(false);
const order = ref({});
const dealTime = ref();
const selectedOrders = ref();
const selectedMenus = ref([])
const expandedRows = ref([]);
const filters = ref({
    'global': { value: null, matchMode: FilterMatchMode.CONTAINS },
    createDateD: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
});
const submitted = ref(false);
const boardBases = ref([
    { name: '多层'},
    { name: '欧松'},
    { name: '颗粒'}
])
const boardSpe = ref([
    { name: '4X8'},
    { name: '4X9'}
])
const hardwareTypes = ref([
    { name: '拉手' },
    { name: '合页' },
    { name: '轨道' },
    { name: '三合一' },
    { name: '快装件' },
    { name: '打包纸' },
    { name: '胶带' },
    { name: '刀头' },
]);

onMounted(() => {
    getData();
    console.log(decoded)
    console.log(orders)
});

//初始化订单ID和销售员
const orderInit = async () => {
    var getTime = new Date().getTime();
    var time = new Date(getTime);
    var year = time.getFullYear(); // 年
    var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
    var date = time.getDate().toString().padStart(2, '0'); // 日
    var hour = time.getHours().toString().padStart(2, '0'); // 时
    var minute = time.getMinutes().toString().padStart(2, '0'); // 分
    /* const token = localStorage.getItem("token");
    const decoded = jwtDecode(token); */
    const response = await axios.get(`/user/getUsers/${decoded.id}`);
    const ids = response.data.data.showId;
    order.value = {
        orderId: year + month + date + hour + minute +"_"+ ids,
        seller: decoded.id,
        sellerName: decoded.username
    };
};

//获取订单数据
const getData = async () => {
    const response = await axios.get("/order/getOrders")
    console.log(response.data.data)
    const data = response.data.data
    if (response.data.code == 200) {
        orders.value = data
        console.log(orders.value.length)
        for (let i = 0; i < orders.value.length; i++) {
            orders.value[i].dealDateD = new Date(orders.value[i].dealDate);
            orders.value[i].dealTimeD = new Date(orders.value[i].dealTime);
            orders.value[i].createDateD = new Date(orders.value[i].createDate);
        }
    }
    console.log(orders)
}

const expandAll = () => {
    expandedRows.value = orders.value.filter((p) => p.id);
};
const collapseAll = () => {
    expandedRows.value = null;
};

//打开新建订单窗口
const openNew = async () => {
    orderInit();
    submitted.value = false;
    orderDialog.value = true;
};

const hideDialog = () => {
    orderDialog.value = false;
    submitted.value = false;
    imageName.value = "new";
};

//保存订单
const saveOrder = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    submitted.value = true;
    console.log(order.value)
    if (!order.value.seller || !order.value.contractId || !order.value.dealTimeD || !order.value.dealDateD || !order.value.finalPayment || !order.value.currency || !order.value.clientName || !order.value.phone || !order.value.address ) {
        console.log("gg")
        return;
    }
    const response = await axios.post("/order/addOrSaveOrder", order.value)
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'success', detail: response.data.message, life: 3000 })
        /* setTimeout(() => {
            location.reload();
        }, 1000) */
    }
};

//保存材料信息
const saveOrderMaterial = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    submitted.value = true;
    order.value.designer = decoded.id;
    console.log(order.value)
    /* if (!order.value.seller || !order.value.contractId || !order.value.dealTimeD || !order.value.dealDateD || !order.value.finalPayment || !order.value.currency || !order.value.clientName || !order.value.phone || !order.value.address ) {
        console.log("gg")
        return;
    }*/
    
    const response = await axios.post("/order/updateOrderMaterial", order.value)
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'success', detail: response.data.message, life: 3000 })
    } 
};

//判定打开编辑窗口
const editOrder = (prod) => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    order.value = { ...prod };
    const statusNum = order.value.status
    if(statusNum==1){
        orderDialog.value = true;
    }
    if(statusNum==2){
        materialDialog.value = true;
    }
    if(statusNum==3 || statusNum==4){
        checkDialog.value = true;
    }
    if(statusNum==5){
        shipmentDialog.value = true;
    }
    if(statusNum==6){
        equipmentDialog.value = true;
    }
    if(statusNum==7){
        order.value.finalPaymentDate = new Date();
        finalPaymentDialog.value = true;
    }
    console.log(order.value)
};

const confirmDeleteOrder = (prod) => {
    order.value = prod;
    deleteOrderDialog.value = true;
};

const confirmTransferOrder = (prod) => {
    order.value = prod;
    transferOrderDialog.value = true;
};

const finishOrder = (prod) => {
    order.value = prod;
    finishOrderDialog.value = true;
}

//更新安装单信息
const equipmentConfirm = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    console.log(order);
    const response = await axios.post("order/equipmentConfirm", order.value);
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'Successful', detail: response.data.message, life: 3000 });
        equipmentConfirmDialog.value = false;
        getData();
    }
}

//更新出货单信息
const shipmentConfirm = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    console.log(order);
    const response = await axios.post("order/shipmentConfirm", order.value);
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'Successful', detail: response.data.message, life: 3000 });
        shipmentConfirmDialog.value = false;
        getData();
    }
}

//删除订单
const deleteOrder = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    console.log(order.value.orderId)
    const response = await axios.post(`order/deleteOrder/${order.value.id}`)
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'Successful', detail: response.data.message, life: 3000 });
        deleteOrderDialog.value = false;
        getData();
    }
};

//确认订单下一流程
const transferOrder = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    console.log(order.value)
    const response = await axios.post(`/order/transferOrder/`, order.value);
    transferOrderDialog.value = false;
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'Successful', detail: response.data.message, life: 3000 });
        deleteOrderDialog.value = false;
        getData();
    }
};

//否决订单
const denyOrder = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    const response = await axios.post(`/order/denyOrder/`, order.value);
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'Successful', detail: response.data.message, life: 3000 });
        deleteOrderDialog.value = false;
        getData();
    }
}

//通过订单
const passOrder = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    console.log(order)
    const response = await axios.post(`/order/passOrder/`, order.value);
    if (response.data.code == 200) {
        toast.add({ severity: 'success', summary: 'Successful', detail: response.data.message, life: 3000 });
        deleteOrderDialog.value = false;
        getData();
    }
}

//导出
const exportCSV = () => {
    dt.value.exportCSV();
};
//批量删除(useless)
const confirmDeleteSelected = () => {
    deleteOrdersDialog.value = true;
};
const deleteSelectedOrders = async () => {
    order.value.user = decoded.id;
    order.value.username = decoded.username;
    const deleteOrders = orders.value.filter(val => selectedOrders.value.includes(val));
    console.log(deleteOrders)
    const response = await axios.post("/dept/deleteDepts", deleteOrders)
    if (response.data.code == 200) {
        deleteOrdersDialog.value = false;
        selectedOrders.value = null;
        toast.add({ severity: 'success', summary: 'Successful', detail: response.data.message, life: 3000 });
        setTimeout(() => {
            location.reload();
        }, 1000)
    }
};

//*遮罩
function replaceMiddleWithAsterisk(str) {
    if (str.length <= 2) {
        return str.charAt(0) + '*' + (str.length === 2 ? str.charAt(1) : ''); // 如果字符串长度小于等于2，在开头字符后添加一个 *
    } else {
        let firstChar = str.charAt(0); // 获取第一个字符
        let lastChar = str.charAt(str.length - 1); // 获取最后一个字符
        return firstChar + '*' + lastChar; // 返回首尾字符加上中间的 *
    }
}

//日期类格式
const formatDate = (value) => {
    return value.toLocaleDateString('cn-CN', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric'
    });
};

const addBoard = () => {
    order.value.ordersBoards.push({ boardTitle: '新木板', boardType: ' ',boardColor: '', boardBase: '', boardSpecs: '', boardAmount: '' });
}

const addHardware = () => {
    order.value.ordersHardware.push({ hardwareTitle: '新五金', hardwareSpecs: '', hardwareBrand: '', hardwareAmount: '' ,hardwareSpecial: '' });
}

const deleteBoard = (index) =>{
    order.value.ordersBoards.splice(index, 1);
}

const deleteHardware = (index) =>{
    order.value.ordersHardware.splice(index, 1);
}

//图片上传前设置
const beforeContractPicUpload = (request) => {
        console.log(request);
        request.xhr.setRequestHeader('orerId', order.orderId);
        return request;
    };
</script>


<template>
    <div>
        <div class="card">
            <Toolbar class="mb-4">
                <template #start>
                    <Button label="新增" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
                    <Button label="删除" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected"
                        :disabled="!selectedOrders || !selectedOrders.length" />
                </template>

                <template #end>
                    <Button label="导出" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
                </template>
            </Toolbar>

            <DataTable ref="dt" :value="orders" v-model:filters="filters" v-model:expandedRows="expandedRows" dataKey="id" responsiveLayout="scroll" v-model:selection="selectedOrders" :paginator="true" :rows="10"
                filterDisplay="menu" removableSort
                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                :rowsPerPageOptions="[5, 10, 25]" currentPageReportTemplate="第 {first} 到 {last} 条数据，共 {totalRecords} 订单"
                :globalFilterFields="['orderId', 'clientName', 'statusInfo']">
                <template #header>
                    <div class="flex flex-wrap gap-2 align-items-center justify-content-between">
                        <h4 class="m-0">订单管理</h4>
                        <span class="p-input-icon-left">
                            <i class="pi pi-search" />
                            <InputText v-tooltip.top="{ value: '订单Id日期/客户姓名/订单状态', fitContent: true }" v-model="filters['global'].value" placeholder="搜索订单..." />
                        </span>
                    </div>
                </template>
                    <!-- <template #header>
                        <div>
                            <Button icon="pi pi-plus" label="展开全部" @click="expandAll" class="mr-2 mb-2" />
                            <Button icon="pi pi-minus" label="隐藏全部" @click="collapseAll" class="mb-2" />
                        </div>
                    </template> -->
                    <Column :expander="true" headerStyle="min-width: 3rem" />
                    <Column field="orderId" header="Id" :sortable="true">
                        <template #body="slotProps">
                            <a :href="`/orderDetail?id=${slotProps.data.id}`" target="_blank">{{ slotProps.data.orderId }}</a>
                        </template>
                    </Column>
                    
                    <Column field="clientName" header="客户姓名" :sortable="true">
                        <template #body="slotProps">
                            {{ replaceMiddleWithAsterisk(slotProps.data.clientName) }}
                        </template>
                    </Column>
                    <Column field="statusInfo" header="订单状态" :sortable="true">
                        <template #body="slotProps">
                            {{ slotProps.data.statusInfo }}
                        </template>
                    </Column>
                    <Column :exportable="false" field="status" header="操作权限" :sortable="true">
                        <template #body="slotProps">
                            {{ slotProps.data.status }}
                        </template>
                    </Column>
                    <Column :exportable="false" field="createDateD" filterField="createDateD" dataType="date" header="创建时间" :sortable="true">
                        <template #body="slotProps">
                            {{ formatDate(slotProps.data.createDateD) }}
                        </template>
                        <template #filter="{ filterModel }">
                            <Calendar v-model="filterModel.value" dateFormat="yy/mm/dd" placeholder="yyyy/mm/dd" mask="9999/99/99" />
                        </template>
                    </Column>
                    <Column :hidden="true" field="createDate" header="创建时间" dataType="date">
                        <template #body="slotProps">
                            {{ formatDate(slotProps.data.createDate) }}
                        </template>
                    </Column>
                    <Column :hidden="true" field="updateDate" header="最后更新时间" dataType="date">
                        <template #body="slotProps">
                            {{ formatDate(slotProps.data.updateDate) }}
                        </template>
                    </Column>
                    <Column :exportable="false" style="min-width:2rem">
                        <template #body="slotProps">
                            <Button v-if="slotProps.data.status!=`0` && slotProps.data.status!=`-1` && slotProps.data.status!=`8`" icon="pi pi-pencil" outlined rounded @click="editOrder(slotProps.data)" />
                            <Button v-if="slotProps.data.status==`1`" icon="pi pi-trash" outlined rounded severity="danger"
                                @click="confirmDeleteOrder(slotProps.data)" />
                            <Button v-if="slotProps.data.status!=`0` && slotProps.data.status!=`-1` && slotProps.data.status!=`3` && slotProps.data.status!=`4` && slotProps.data.status!=`8`" icon="pi pi-reply" outlined rounded severity="success"
                                @click="confirmTransferOrder(slotProps.data)" />
                            <Button v-if="slotProps.data.status==`8`" icon="pi pi-check" outlined rounded severity="success" @click="finishOrder(slotProps.data)" />
                        </template>
                    </Column>
                    <template #expansion="slotProps">
                        <div class="p-3">
                            <h5>订单操作记录： {{ slotProps.data.orderId }}</h5>
                            <DataTable :value="slotProps.data.orderHistories" responsiveLayout="scroll">
                                <Column field="operator" header="操作人员" >
                                    <template #body="slotProps">
                                        {{ slotProps.data.operator }}
                                    </template>
                                </Column>
                                <!-- <Column header="Image">
                                    <template #body="slotProps">
                                        <img :src="slotProps.data.image" :alt="slotProps.data.image" class="shadow-2"
                                            width="100" style="width: 50px;" />
                                    </template>
                                </Column> -->
                                <Column field="customer" header="修改日期" >
                                    <template #body="slotProps">
                                        {{ slotProps.data.updateDate }}
                                    </template>
                                </Column>
                                <Column field="brief" header="操作" >
                                    <template #body="slotProps">
                                        {{ slotProps.data.brief }}
                                    </template>
                                </Column>
                            </DataTable>
                        </div>
                    </template>
                </DataTable>
        </div>

        <Dialog v-model:visible="orderDialog" :style="{ width: '450px' }" header="订单：" :modal="true" class="p-fluid">
            <div class="field">
                <label for="orderId">单号</label>
                <InputText id="orderId" v-model.trim="order.orderId" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.orderId }" disabled />
            </div>
            <div class="field">
                <label for="seller">销售人员</label>
                <InputText id="seller" v-model.trim="order.sellerName" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.sellerName }" disabled/>
                <small class="p-error" v-if="submitted && !order.seller">请输入名称</small>
            </div>
            <div class="field">
                <h5 style="font-weight: 700;">合同信息:</h5>
                <label for="contractId">合同编号</label>
                <InputText id="contractId" v-model.trim="order.contractId" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.contractId }" />
                <small class="p-error" v-if="submitted && !order.contractId">请输入编号</small>
            </div>
            <div class="field">
                <label for="dealTimeD">交付时间</label>
                <Calendar :showIcon="true" :showButtonBar="true" id="dealTimeD" v-model.trim="order.dealTimeD"
                    hourFormat="24" touchUI :class="{ 'p-invalid': submitted && !order.dealTimeD }" />
                <small class="p-error" v-if="submitted && !order.dealTimeD">请输入交付时间</small>
            </div>
            <div class="field">
                <label for="finalPayment">交互完成尾款</label>
                <InputNumber v-model.trim="order.finalPayment" inputId="currency-japan" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.finalPayment }" />
                <small class="p-error" v-if="submitted && !order.finalPayment">请输入交互完成尾款</small>
            </div>
            <div class="field">
                <label for="dealDateD">交互工作日</label>
                <Calendar :showIcon="true" :showButtonBar="true" id="dealDateD" v-model.trim="order.dealDateD" hourFormat="24"
                    touchUI :class="{ 'p-invalid': submitted && !order.dealDateD }" />
                <small class="p-error" v-if="submitted && !order.dealDateD">请输入交互工作日</small>
            </div>
            <div class="field">
                <label for="name">合同总额</label>
                <InputNumber v-model.trim="order.currency" inputId="currency-japan" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.currency }" />
                <small class="p-error" v-if="submitted && !order.currency">请输入合同总额</small>
            </div>
            <div class="field">
                <label for="clientName">客户姓名</label>
                <InputText id="clientName" v-model.trim="order.clientName" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.clientName }" />
                <small class="p-error" v-if="submitted && !order.clientName">请输入客户姓名</small>
            </div>
            <div class="field">
                <label for="phone">联系电话</label>
                <InputText id="phone" v-model.trim="order.phone" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.phone }" />
                <!-- <InputMask id="phone" v-model.trim="order.phone" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.phone }" mask="999-9999-999" placeholder="000-0000-0000" /> -->
                <small class="p-error" v-if="submitted && !order.phone">请输入联系电话</small>
            </div>
            <div class="field">
                <label for="address">订单客户安装地址</label>
                <Textarea id="address" v-model.trim="order.address" required="true" autofocus autoResize 
                    :class="{ 'p-invalid': submitted && !order.address }" />
                <small class="p-error" v-if="submitted && !order.address">请输入订单客户安装地址</small>
            </div>
            <div class="field">
                <label for="contractPic">合同照片</label>
                <FileUpload name="contractPic" url="http://localhost:80/api/contractPic" @before-send="beforeContractPicUpload" :multiple="true" accept="image/*" :maxFileSize="1000000" @select="onSelectedFiles">
                    <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
                        <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
                            <div class="flex gap-2">
                                <Button label="选择" @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
                                <Button label="上传" @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
                                <Button label="取消" @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                            </div>
                        </div>
                    </template>
                    <template #content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback }">
                        <div v-if="files.length > 0">
                            <h5>Pending</h5>
                            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                                <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                                    <div>
                                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                                    </div>
                                    <span class="font-semibold">{{ file.name }}</span>
                                    <div>{{ formatSize(file.size) }}</div>
                                    <Badge value="Pending" severity="warning" />
                                    <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded  severity="danger" />
                                </div>
                            </div>
                        </div>

                        <div v-if="uploadedFiles.length > 0">
                            <h5>Completed</h5>
                            <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                                <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                                    <div>
                                        <Image role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" preview />
                                    </div>
                                    <span class="font-semibold">{{ file.name }}</span>
                                    <div>{{ formatSize(file.size) }}</div>
                                    <Badge value="Completed" class="mt-3" severity="success" />
                                    <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                                </div>
                            </div>
                        </div>
                    </template>
                    <template #empty>
                        <div class="flex align-items-center justify-content-center flex-column">
                            <i class="pi pi-cloud-upload border-2 border-circle p-5 text-8xl text-400 border-400" />
                            <p class="mt-4 mb-0">Drag and drop files to here to upload.</p>
                        </div>
                    </template>
                </FileUpload>
                <!-- <InputText id="contractPhoto" v-model.trim="order.contractPhoto" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.contractPhoto }" /> -->
                <small class="p-error" v-if="submitted && !order.contractPhoto">请输入名称</small>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="hideDialog" />
                <Button label="确定" icon="pi pi-check" text @click="saveOrder" />
            </template>
        </Dialog>

        <Dialog v-model:visible="materialDialog" :style="{ width: '450px' }" header="材料：" :modal="true" class="p-fluid">
            <div class="field">
                <h5 style="font-weight: 700;">板子信息：</h5>
                <Button label="新增板子" icon="pi pi-plus" text @click="addBoard"/>
            </div>
            <div class="field" >
                <Accordion :activeIndex="0" multiple="true"> 
                    <AccordionTab v-for="(board, index) in order.ordersBoards" :key="board.boardTitle" :header="board.boardTitle">
                        <div class="field">
                            <label for="boardType">型号</label>
                            <InputText id="boardType" v-model.trim="board.boardType" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardType }"  />
                                <small class="p-error" v-if="submitted && !board.boardType">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardColor">颜色</label>
                            <InputText id="boardColor" v-model.trim="board.boardColor" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardColor }" />
                            <small class="p-error" v-if="submitted && !board.boardColor">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardBase">基材</label>
                            <Dropdown v-model.trim="board.boardBase" :options="boardBases" optionLabel="name" optionValue="name"></Dropdown>
                            <!-- <InputText id="boardBase" v-model.trim="board.boardBase.name" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardBase }" /> -->
                            <small class="p-error" v-if="submitted && !board.boardBase">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardSpecs">规格</label>
                            <Dropdown id="boardSpecs" v-model.trim="board.boardSpecs" :options="boardSpe" optionLabel="name" optionValue="name"></Dropdown>

                            <small class="p-error" v-if="submitted && !board.boardSpecs">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardAmount">数量</label>
                            <InputText id="boardAmount" v-model.trim="board.boardAmount" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardAmount }" />
                            <small class="p-error" v-if="submitted && !board.boardAmount">请输入名称</small>
                        </div>
                        <Button label="删除板子" icon="pi pi-trash" text severity="danger" @click="deleteBoard(index)"/>
                    </AccordionTab>
                </Accordion>
            </div>
            <div class="field">
                <h5 style="font-weight: 700;">五金信息:</h5>
                <Button label="新增五金" icon="pi pi-plus" text @click="addHardware"/>
                <Accordion :activeIndex="0" multiple="true"> 
                    <AccordionTab v-for="(hardware, index) in order.ordersHardware" :key="hardware.hardwareTitle" :header="hardware.hardwareTitle">
                        <div class="field">
                        <label for="hardwareTitle">五金类型</label>
                        <Dropdown v-model.trim="hardware.hardwareTitle" :options="hardwareTypes" optionLabel="name" optionValue="name">

                        </Dropdown>
                            <small class="p-error" v-if="submitted && !hardware.hardwareTitle">请输入名称</small>
                        </div>
                        <div class="field">
                        <label for="hardwareSpecs">规格</label>
                        <InputText id="hardwareSpecs" v-model.trim="hardware.hardwareSpecs" required="true" autofocus
                            :class="{ 'p-invalid': submitted && !hardware.hardwareSpecs }"  />
                            <small class="p-error" v-if="submitted && !hardware.hardwareSpecs">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareBrand">品牌</label>
                            <InputText id="hardwareBrand" v-model.trim="hardware.hardwareBrand" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareBrand }" />
                            <small class="p-error" v-if="submitted && !hardware.hardwareBrand">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareAmount">数量</label>
                            <InputText id="hardwareAmount" v-model.trim="hardware.hardwareAmount" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareAmount }" />
                            <small class="p-error" v-if="submitted && !hardware.hardwareAmount">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareSpecial">特殊功能</label>
                            <InputText id="hardwareSpecial" v-model.trim="hardware.hardwareSpecial" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareSpecial }" />
                            <small class="p-error" v-if="submitted && !hardware.hardwareSpecial">请输入名称</small>
                        </div>
                        <Button label="删除五金" icon="pi pi-trash" text severity="danger" @click="deleteHardware(index)"/>
                    </AccordionTab>
                </Accordion>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="materialDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="saveOrderMaterial" />
            </template>
        </Dialog>

        <Dialog v-model:visible="checkDialog" :style="{ width: '450px' }" header="订单详情审批：" :modal="true" class="p-fluid">
            <div class="field">
                <label for="orderId">单号</label>
                <InputText id="orderId" v-model.trim="order.orderId" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.orderId }" disabled />
            </div>
            <div class="field">
                <label for="seller">销售人员</label>
                <InputText id="seller" v-model.trim="order.sellerName" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.sellerName }" disabled/>
                <small class="p-error" v-if="submitted && !order.seller">请输入名称</small>
            </div>
            <div class="field">
                <h5 style="font-weight: 700;">合同信息:</h5>
                <label for="contractId">合同编号</label>
                <InputText id="contractId" v-model.trim="order.contractId" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.contractId }" disabled/>
                <small class="p-error" v-if="submitted && !order.contractId">请输入编号</small>
            </div>
            <div class="field">
                <label for="dealTimeD">交付时间</label>
                <Calendar :showIcon="true" :showButtonBar="true" id="dealTimeD" v-model.trim="order.dealTimeD"
                    hourFormat="24" touchUI :class="{ 'p-invalid': submitted && !order.dealTimeD }" disabled/>
                <small class="p-error" v-if="submitted && !order.dealTimeD">请输入交付时间</small>
            </div>
            <div class="field">
                <label for="finalPayment">交互完成尾款</label>
                <InputNumber v-model.trim="order.finalPayment" inputId="currency-japan" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.finalPayment }" disabled/>
                <small class="p-error" v-if="submitted && !order.finalPayment">请输入交互完成尾款</small>
            </div>
            <div class="field">
                <label for="dealDateD">交互工作日</label>
                <Calendar :showIcon="true" :showButtonBar="true" id="dealDateD" v-model.trim="order.dealDateD" hourFormat="24"
                    touchUI :class="{ 'p-invalid': submitted && !order.dealDateD }" disabled/>
                <small class="p-error" v-if="submitted && !order.dealDateD">请输入交互工作日</small>
            </div>
            <div class="field">
                <label for="name">合同总额</label>
                <InputNumber v-model.trim="order.currency" inputId="currency-japan" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.currency }" disabled/>
                <small class="p-error" v-if="submitted && !order.currency">请输入合同总额</small>
            </div>
            <div class="field">
                <label for="clientName">客户姓名</label>
                <InputText id="clientName" v-model.trim="order.clientName" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.clientName }" disabled/>
                <small class="p-error" v-if="submitted && !order.clientName">请输入客户姓名</small>
            </div>
            <div class="field">
                <label for="phone">联系电话</label>
                <InputText id="phone" v-model.trim="order.phone" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.phone }" disabled/>
                <!-- <InputMask id="phone" v-model.trim="order.phone" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.phone }" mask="999-9999-999" placeholder="000-0000-0000" /> -->
                <small class="p-error" v-if="submitted && !order.phone">请输入联系电话</small>
            </div>
            <div class="field">
                <label for="address">订单客户安装地址</label>
                <Textarea id="address" v-model.trim="order.address" required="true" autofocus autoResize 
                    :class="{ 'p-invalid': submitted && !order.address }" disabled/>
                <small class="p-error" v-if="submitted && !order.address">请输入订单客户安装地址</small>
            </div>
            <div class="field">
                <label for="contractPhoto">合同照片</label>
                <FileUpload :name="imageName" url="/api/productImage" @upload="upload($event)"
                    :multiple="true" accept="image/*" :maxFileSize="1000000">
                    <template #empty>
                        <p>拖拽或添加文件上传头像</p>
                    </template>
                </FileUpload>
            </div>
            <div class="field">
                <h5 style="font-weight: 700;">板子信息：</h5>
            </div>
            <div class="field" >
                <Accordion :activeIndex="0" multiple="true"> 
                    <AccordionTab v-for="(board, index) in order.ordersBoards" :key="board.boardTitle" :header="board.boardTitle">
                        <div class="field">
                            <label for="boardType">型号</label>
                            <InputText id="boardType" v-model.trim="board.boardType" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardType }"  disabled/>
                                <small class="p-error" v-if="submitted && !board.boardType">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardColor">颜色</label>
                            <InputText id="boardColor" v-model.trim="board.boardColor" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardColor }" disabled/>
                            <small class="p-error" v-if="submitted && !board.boardColor">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardBase">基材</label>
                            <InputText id="boardBase" v-model.trim="board.boardBase" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardBase }" disabled/>
                            <small class="p-error" v-if="submitted && !board.boardBase">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardSpecs">规格</label>
                            <InputText id="boardSpecs" v-model.trim="board.boardSpecs" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardSpecs }" disabled/>
                            <small class="p-error" v-if="submitted && !board.boardSpecs">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardAmount">数量</label>
                            <InputText id="boardAmount" v-model.trim="board.boardAmount" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardAmount }" disabled/>
                            <small class="p-error" v-if="submitted && !board.boardAmount">请输入名称</small>
                        </div>
                    </AccordionTab>
                </Accordion>
            </div>
            <div class="field">
                <h5 style="font-weight: 700;">五金信息:</h5>
                <Accordion :activeIndex="0" multiple="true"> 
                    <AccordionTab v-for="hardware in order.ordersHardware" :key="hardware.hardwareTitle" :header="hardware.hardwareTitle">
                        <div class="field">
                            <label for="hardwareSpecs">规格</label>
                            <InputText id="hardwareSpecs" v-model.trim="hardware.hardwareSpecs" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareSpecs }"  disabled/>
                            <small class="p-error" v-if="submitted && !hardware.hardwareSpecs">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareBrand">品牌</label>
                            <InputText id="hardwareBrand" v-model.trim="hardware.hardwareBrand" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareBrand }" disabled/>
                            <small class="p-error" v-if="submitted && !hardware.hardwareBrand">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareAmount">数量</label>
                            <InputText id="hardwareAmount" v-model.trim="hardware.hardwareAmount" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareAmount }" disabled/>
                            <small class="p-error" v-if="submitted && !hardware.hardwareAmount">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareSpecial">特殊功能</label>
                            <InputText id="hardwareSpecial" v-model.trim="hardware.hardwareSpecial" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareSpecial }" disabled/>
                            <small class="p-error" v-if="submitted && !hardware.hardwareSpecial">请输入名称</small>
                        </div>
                    </AccordionTab>
                </Accordion>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="checkDialog = false" />
                <Button label="否决" icon="pi pi-times-circle" text @click="denyOrdersDialog = true" severity="danger"/>
                <Button label="通过" icon="pi pi-verified" text @click="passOrdersDialog = true" severity="success"/>
            </template>
        </Dialog>

        <Dialog v-model:visible="shipmentDialog" :style="{ width: '450px' }" header="出货单：" :modal="true" class="p-fluid">
            <div class="field">
                <label for="orderId">单号</label>
                <InputText id="orderId" v-model.trim="order.orderId" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.orderId }" disabled />
            </div>
            <div class="field">
                <label for="seller">销售人员</label>
                <InputText id="seller" v-model.trim="order.sellerName" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.sellerName }" disabled/>
                <small class="p-error" v-if="submitted && !order.seller">请输入名称</small>
            </div>
            <div class="field">
                <h5 style="font-weight: 700;">合同信息:</h5>
                <label for="contractId">合同编号</label>
                <InputText id="contractId" v-model.trim="order.contractId" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.contractId }" disabled/>
                <small class="p-error" v-if="submitted && !order.contractId">请输入编号</small>
            </div>
            <div class="field">
                <label for="dealTimeD">交付时间</label>
                <Calendar :showIcon="true" :showButtonBar="true" id="dealTimeD" v-model.trim="order.dealTimeD"
                    hourFormat="24" touchUI :class="{ 'p-invalid': submitted && !order.dealTimeD }" disabled/>
                <small class="p-error" v-if="submitted && !order.dealTimeD">请输入交付时间</small>
            </div>
            <div class="field">
                <label for="finalPayment">交互完成尾款</label>
                <InputNumber v-model.trim="order.finalPayment" inputId="currency-japan" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.finalPayment }" disabled/>
                <small class="p-error" v-if="submitted && !order.finalPayment">请输入交互完成尾款</small>
            </div>
            <div class="field">
                <label for="dealDateD">交互工作日</label>
                <Calendar :showIcon="true" :showButtonBar="true" id="dealDateD" v-model.trim="order.dealDateD" hourFormat="24"
                    touchUI :class="{ 'p-invalid': submitted && !order.dealDateD }" disabled/>
                <small class="p-error" v-if="submitted && !order.dealDateD">请输入交互工作日</small>
            </div>
            <div class="field">
                <label for="name">合同总额</label>
                <InputNumber v-model.trim="order.currency" inputId="currency-japan" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.currency }" disabled/>
                <small class="p-error" v-if="submitted && !order.currency">请输入合同总额</small>
            </div>
            <div class="field">
                <label for="clientName">客户姓名</label>
                <InputText id="clientName" v-model.trim="order.clientName" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.clientName }" disabled/>
                <small class="p-error" v-if="submitted && !order.clientName">请输入客户姓名</small>
            </div>
            <div class="field">
                <label for="phone">联系电话</label>
                <InputText id="phone" v-model.trim="order.phone" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.phone }" disabled/>
                <!-- <InputMask id="phone" v-model.trim="order.phone" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.phone }" mask="999-9999-999" placeholder="000-0000-0000" /> -->
                <small class="p-error" v-if="submitted && !order.phone">请输入联系电话</small>
            </div>
            <div class="field">
                <label for="address">订单客户安装地址</label>
                <Textarea id="address" v-model.trim="order.address" required="true" autofocus autoResize 
                    :class="{ 'p-invalid': submitted && !order.address }" disabled/>
                <small class="p-error" v-if="submitted && !order.address">请输入订单客户安装地址</small>
            </div>
            <div class="field">
                <label for="contractPhoto">合同照片</label>
                <FileUpload :name="imageName" url="/api/productImage" @upload="upload($event)"
                    :multiple="true" accept="image/*" :maxFileSize="1000000">
                    <template #empty>
                        <p>拖拽或添加文件上传头像</p>
                    </template>
                </FileUpload>
            </div>
            <div class="field">
                <h5 style="font-weight: 700;">板子信息：</h5>
            </div>
            <div class="field" >
                <Accordion :activeIndex="0" multiple="true"> 
                    <AccordionTab v-for="(board, index) in order.ordersBoards" :key="board.boardTitle" :header="board.boardTitle">
                        <div class="field">
                            <label for="boardType">型号</label>
                            <InputText id="boardType" v-model.trim="board.boardType" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardType }"  />
                                <small class="p-error" v-if="submitted && !board.boardType">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardColor">颜色</label>
                            <InputText id="boardColor" v-model.trim="board.boardColor" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardColor }" />
                            <small class="p-error" v-if="submitted && !board.boardColor">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardBase">基材</label>
                            <InputText id="boardBase" v-model.trim="board.boardBase" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardBase }" />
                            <small class="p-error" v-if="submitted && !board.boardBase">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardSpecs">规格</label>
                            <InputText id="boardSpecs" v-model.trim="board.boardSpecs" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardSpecs }" />
                            <small class="p-error" v-if="submitted && !board.boardSpecs">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="boardAmount">数量</label>
                            <InputText id="boardAmount" v-model.trim="board.boardAmount" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !board.boardAmount }" />
                            <small class="p-error" v-if="submitted && !board.boardAmount">请输入名称</small>
                        </div>
                    </AccordionTab>
                </Accordion>
            </div>
            <div class="field">
                <h5 style="font-weight: 700;">五金信息:</h5>
                <Accordion :activeIndex="0" multiple="true"> 
                    <AccordionTab v-for="hardware in order.ordersHardware" :key="hardware.hardwareTitle" :header="hardware.hardwareTitle">
                        <div class="field">
                            <label for="hardwareSpecs">规格</label>
                            <InputText id="hardwareSpecs" v-model.trim="hardware.hardwareSpecs" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareSpecs }"  disabled/>
                            <small class="p-error" v-if="submitted && !hardware.hardwareSpecs">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareBrand">品牌</label>
                            <InputText id="hardwareBrand" v-model.trim="hardware.hardwareBrand" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareBrand }" disabled/>
                            <small class="p-error" v-if="submitted && !hardware.hardwareBrand">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareAmount">数量</label>
                            <InputText id="hardwareAmount" v-model.trim="hardware.hardwareAmount" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareAmount }" disabled/>
                            <small class="p-error" v-if="submitted && !hardware.hardwareAmount">请输入名称</small>
                        </div>
                        <div class="field">
                            <label for="hardwareSpecial">特殊功能</label>
                            <InputText id="hardwareSpecial" v-model.trim="hardware.hardwareSpecial" required="true" autofocus
                                :class="{ 'p-invalid': submitted && !hardware.hardwareSpecial }" disabled/>
                            <small class="p-error" v-if="submitted && !hardware.hardwareSpecial">请输入名称</small>
                        </div>
                    </AccordionTab>
                </Accordion>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="shipmentDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="shipmentConfirmDialog = true" />
            </template>
        </Dialog>

        <Dialog v-model:visible="equipmentDialog" :style="{ width: '450px' }" header="安装单：" :modal="true" class="p-fluid">
            <div class="field">
                <label for="note">备注</label>
                <Textarea id="note" v-model.trim="order.note" required="true" autofocus autoResize 
                    :class="{ 'p-invalid': submitted && !order.note }"/>
            </div>
            <div class="field">
                <h5 for="contractPhoto">产品拍照</h5>
                <FileUpload :name="imageName" url="/api/productImage" @upload="upload($event)"
                    :multiple="true" accept="image/*" :maxFileSize="1000000">
                    <template #empty>
                        <p>拖拽或添加文件上传头像</p>
                    </template>
                </FileUpload>
            </div>
            <div class="field">
                <h5 for="contractPhoto">客户合照</h5>
                <FileUpload :name="imageName" url="/api/productImage" @upload="upload($event)"
                    :multiple="true" accept="image/*" :maxFileSize="1000000">
                    <template #empty>
                        <p>拖拽或添加文件上传头像</p>
                    </template>
                </FileUpload>
            </div>
            <div class="field">
                <h5 for="contractPhoto">客户电子签字</h5>
                <FileUpload :name="imageName" url="/api/productImage" @upload="upload($event)"
                    :multiple="true" accept="image/*" :maxFileSize="1000000">
                    <template #empty>
                        <p>拖拽或添加文件上传头像</p>
                    </template>
                </FileUpload>
            </div>

            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="equipmentDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="equipmentConfirmDialog = true" />
            </template>
        </Dialog>

        <Dialog v-model:visible="finalPaymentDialog" :style="{ width: '450px' }" header="财务尾款" :modal="true" class="p-fluid">
            <div class="field">
                <label for="finalPaymentDate">尾款交付时间</label>
                <Calendar :showIcon="true" :showButtonBar="true" id="finalPaymentDate" v-model.trim="order.finalPaymentDate" showTime
                    hourFormat="24" touchUI :class="{ 'p-invalid': submitted && !order.finalPaymentDate }" />
                <small class="p-error" v-if="submitted && !order.finalPaymentDate">请输入交付时间</small>
            </div>
            <div class="field">
                <label for="name">金额</label>
                <InputNumber v-model.trim="order.currency" inputId="currency-china" mode="currency" currency="CNY"
                    locale="zh-CN" :class="{ 'p-invalid': submitted && !order.currency }" />
                <small class="p-error" v-if="submitted && !order.currency">请输入合同总额</small>
            </div>
            <div class="field">
                <label for="clientName">客户姓名</label>
                <InputText id="clientName" v-model.trim="order.clientName" required="true" autofocus
                    :class="{ 'p-invalid': submitted && !order.clientName }" disabled/>
                <small class="p-error" v-if="submitted && !order.clientName">请输入客户姓名</small>
            </div>
            <div class="field">
                <label for="contractPhoto">凭据照片</label>
                <FileUpload :name="imageName" url="/api/productImage" @upload="upload($event)"
                    :multiple="true" accept="image/*" :maxFileSize="1000000">
                    <template #empty>
                        <p>拖拽或添加文件上传头像</p>
                    </template>
                </FileUpload>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="finalPaymentDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="saveOrderMaterial" />
            </template>
        </Dialog>

        <Dialog v-model:visible="transferOrderDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                <span v-if="order">确定流转订单 <b>{{ order.orderId }}</b> 至下一阶段?</span>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="transferOrderDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="transferOrder" />
            </template>
        </Dialog>

        <Dialog v-model:visible="finishOrderDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                <span v-if="order">确定尾款收完，完成订单 <b>{{ order.orderId }}</b> ?</span>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="finishOrderDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="transferOrder(); finishOrderDialog = false" />
            </template>
        </Dialog>

        <Dialog v-model:visible="deleteOrderDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                <span v-if="order">确定删除 <b>{{ order.orderId }}</b>?</span>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="deleteOrderDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="deleteOrder" />
            </template>
        </Dialog>

        <Dialog v-model:visible="denyOrdersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                <span v-if="order">确定否决该订单信息?</span>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="denyOrdersDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="denyOrder" />
            </template>
        </Dialog>

        <Dialog v-model:visible="passOrdersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-check-circle mr-3" style="font-size: 2rem" />
                <span v-if="order">确定通过该订单信息?</span>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="passOrdersDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="passOrder" />
            </template>
        </Dialog>

        <Dialog v-model:visible="shipmentConfirmDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                <span v-if="order">确定提交安装单信息?</span>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="shipmentConfirmDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="shipmentConfirm" />
            </template>
        </Dialog>

        <Dialog v-model:visible="equipmentConfirmDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                <span v-if="order">确定提交安装单信息?</span>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="equipmentConfirmDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="equipmentConfirm" />
            </template>
        </Dialog>

        <Dialog v-model:visible="deleteOrdersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
            <div class="confirmation-content">
                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                <span v-if="order">确定删除选中角色?</span>
            </div>
            <template #footer>
                <Button label="取消" icon="pi pi-times" text @click="deleteOrdersDialog = false" />
                <Button label="确定" icon="pi pi-check" text @click="deleteSelectedOrders" />
            </template>
        </Dialog>
        <Toast />
    </div>
</template>